---
title: The Apollo Studio Explorer
description: Overview
sidebar_title: Overview
---

import { VideoFrame } from 'gatsby-theme-apollo-docs'
import { EmbeddableExplorer } from "gatsby-theme-apollo-docs";

The Apollo Studio Explorer is a powerful web IDE for creating, running, and managing GraphQL operations:

<VideoFrame src="https://www.youtube.com/embed/j8b0Bda_TIw"/>

The Explorer is free for all Apollo Studio organizations. It supports all GraphQL operation types (`Query`, `Mutation`, and [`Subscription`](./additional-features/#subscription-support)).

## Setup

To get started with the Explorer, [create a graph](../getting-started/#2-create-your-first-graph) in Apollo Studio and then navigate to the graph's Explorer tab.

> The Explorer also provides a [sandbox mode](./sandbox/) that doesn't require an Apollo account.

The Getting Started tab _within_ the Explorer helps you get up and running with core features.

When you execute your first query, the Explorer prompts you for the URL of your running GraphQL server. You can then change this URL at any time from the Explorer's Settings tab.

## Building a query

Here's an example embedded Explorer you use to try out the query-building features described below:

<EmbeddableExplorer
  graphRef="Apollo-Fullstack-Demo-o3tsz8@current"
  graphEndpoint="https://apollo-fullstack-tutorial.herokuapp.com/"
  graphSubscriptionEndpoint="wss://apollo-fullstack-tutorial.herokuapp.com/graphql"
  defaultOperation={`query GetLaunches {
  launches {
    launches {
      id
      site
      rocket {
        id
        name
      }
    }
  }
}`}
  styles={{
    width: "100%",
    height: "450px",
    border: "0px",
    borderRadius: "4px",
  }}
/>

### The operation editor

The Explorer’s operation editor is built on [Monaco](https://microsoft.github.io/monaco-editor/). It provides common features of query-building tools, including:

* Panels for specifying headers, variables, and environment variables
* Persistence across sessions
* Keyboard shortcuts (click the keyboard icon in the bottom-right corner of the operation editor to view all available shortcuts)

The editor also provides full IntelliSense support for GraphQL, including:

* Query linting
* Autocomplete
* Peek definitions on mouse hover
* Jump-to-definition with command-click

The editor can manage multiple operations and reason about those operations individually. As you work, the editor shifts focus to whichever operation you click into. Each operation has its own context menu (`•••`) that enables you to format it, copy a link to share, or generate a `curl` command.

### The Documentation tab

The Explorer's Documentation tab enables you to step into your schema, beginning at one of its entry points. As you step into a field and its subfields, the Explorer keeps track of your current path within the schema.

You can click the **⊕** button next to any field in the Documentation tab to add that field to the operation editor, at your current path. By default, the Explorer automatically generates variables for that field's arguments.

## Searching your schema

The Explorer provides a two-step schema search (shortcut `⌘+K`):

1. Find the schema field you're looking for
2. Find the ideal _path_ to that field from your schema's entry points

### 1. Find a field

First, you search for a field by its name (e.g., `email`). The interface helps you differentiate between fields with the same name (e.g., `User.email` versus `Organization.email`). The search is "fuzzy", so it works even if you don't know a field's exact spelling.

If you know exactly which type and which field you're looking for, you can separate those values with a period (e.g., `User.email`).

### 2. Find a path to the field

After you identify a type-field pair, the Explorer lists all of the _paths_ to that field that start at your schema's entry points (`Query`, `Mutation` and `Subscription`). These paths are ordered by depth.

> Finding the path to a field is particularly important with GraphQL, because you can only query a field if that field's position within your query is valid.

After you select which path you want, the Explorer opens that path in its Documentation tab. You can then click the **⊕** button to add that path to your query.

## Additional features

The Explorer also provides:

* A [sandbox mode](./sandbox/) that doesn't require an Apollo account
* Multiple methods for [authenticating](./connecting-authenticating/) with your GraphQL server
* The ability to [embed the Explorer](./embed-explorer/) on your own website
* [Display options, federation support, and more](./additional-features/)
